<template>
  <div class="note-card">
    <!-- 用户信息 -->
    <div class="user-info">
      <img :src="note.user.avatar" alt="用户头像" class="avatar" />
      <span class="username">{{ note.user.name }}</span>
      <button class="follow-btn">关注</button>
    </div>
    
    <!-- 笔记标题和内容 -->
    <div class="note-content">
      <h3 class="note-title">{{ note.title }}</h3>
      <p class="note-text">{{ note.content }}</p>
    </div>
    
    <!-- 图片展示 -->
    <div class="note-images" :class="{ 'single-image': note.images.length === 1, 'multi-images': note.images.length > 1 }">
      <img v-for="(img, index) in note.images" :key="index" :src="img" :alt="`笔记图片${index + 1}`" class="note-image" />
    </div>
    
    <!-- 标签 -->
    <div class="note-tags" v-if="note.tags && note.tags.length > 0">
      <span v-for="(tag, index) in note.tags" :key="index" class="tag">#{{ tag }}</span>
    </div>
    
    <!-- 互动区域 -->
    <div class="note-actions">
      <button class="action-btn">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" class="action-icon">
          <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        <span class="action-count">{{ formatNumber(note.likes) }}</span>
      </button>
      <button class="action-btn">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" class="action-icon">
          <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        <span class="action-count">{{ formatNumber(note.comments) }}</span>
      </button>
      <button class="action-btn">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" class="action-icon">
          <path d="M22 2H2v20l4-4h16V2z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </button>
      <button class="action-btn">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" class="action-icon">
          <circle cx="18" cy="5" r="3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          <circle cx="6" cy="12" r="3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          <circle cx="18" cy="19" r="3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          <line x1="8.59" y1="13.51" x2="15.42" y2="17.49" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          <line x1="15.41" y1="6.51" x2="8.59" y2="10.49" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 接收笔记数据
const props = defineProps({
  note: {
    type: Object,
    required: true
  }
})

// 格式化数字，超过1000显示为K
const formatNumber = (num) => {
  if (num >= 1000) {
    return (num / 1000).toFixed(1) + 'k'
  }
  return num
}
</script>

<style scoped>
.note-card {
  background-color: #fff;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* 用户信息 */
.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 12px;
}

.username {
  flex: 1;
  font-weight: 500;
  color: #333;
}

.follow-btn {
  background-color: #ff2442;
  color: white;
  border: none;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
}

.follow-btn:hover {
  background-color: #ff4764;
}

/* 笔记内容 */
.note-content {
  margin-bottom: 12px;
}

.note-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 8px;
  line-height: 1.4;
}

.note-text {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
  margin-bottom: 0;
}

/* 图片展示 */
.note-images {
  margin-bottom: 12px;
  border-radius: 8px;
  overflow: hidden;
}

.single-image img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.multi-images {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
}

.multi-images img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 6px;
}

/* 标签 */
.note-tags {
  margin-bottom: 12px;
}

.tag {
  display: inline-block;
  background-color: #f5f5f5;
  color: #666;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 4px;
  margin-right: 6px;
  margin-bottom: 6px;
}

/* 互动区域 */
.note-actions {
  display: flex;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid #f0f0f0;
}

.action-btn {
  display: flex;
  align-items: center;
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 4px;
  margin-right: 8px;
}

.action-btn:hover {
  background-color: #f5f5f5;
  color: #333;
}

.action-icon {
  margin-right: 4px;
}

.action-count {
  font-size: 14px;
}
</style>